<template>
  <div id="app">
    <transition name="slide"> 
       <Toast v-show="this.$store.state.toastState" />
    </transition>
    
    <Login v-show="$store.state.ifShowLoginModal"/>
    <Register v-show="$store.state.ifShowRegisterModal"/>
    <Header/>
    <Nav/>
    
    <div class="home1">
      <div class="zhanwei"></div>
      <router-view ></router-view>
    </div>
    
    <Footer/>
  </div>
</template>

<script>
import Header from './components/Header'
import Nav from "./components/Nav"
import Footer from "./components/Footer"
import Login from './components/Login'
import Toast from './components/Toast'
import Register from './components/Register'
export default {
  name: 'App',
  components:{
    Header,Nav,Footer,
    Login,Toast,
    Register, 
  },
}
</script>

<style lang='less' scope>

@import './assets/css/total.css';
body{
  font-size: 16px;
  font-family: SourceHanSansSC;
  color: #333333;
}
// 入场的起始状态等于离场的结束状态
.slide-enter, .slide-leave-to{
  top: -200px;
}
.slide-enter-active,.slide-leave-active{
  transition: top 1s linear;
}
.slide-enter-to,.slide-leave{
  top:0;
}
.home1{
  // background-color: #e9e5e5;
}
.zhanwei{
  height: 110px;
  width: 100%;
}

</style>
